import React, { useState, useEffect } from 'react';
import { Button, Modal, Input, Form, Select, InputNumber, Radio, Col } from 'antd';
const FormItem = Form.Item;
const { TextArea } = Input;

const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 5,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 18,
    },
    md: {
      span: 18,
    },
  },
};
const submitFormLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 18,
      offset: 5,
    },
  },
};
const MemberCardTypeMap={
  '1':'储值类型',
  '2':'次卡类型',
  '3':'期限类型',
  '4':'器械类型'
}
const ResevationSave = props => {
  const { visible, hideModal, onFinish, handleSearch, handleSelect, options, member, membersCardList, submitting, type, timeList, siteList, venueName,classId,venueId ,dispatch} = props
  const [form] = Form.useForm();
  const [startTime,setStartTime] = useState('');
  const _onFinish = (values) => {
    console.log('values>>',values)
    onFinish(values, () => {
      form.resetFields();
    })
  }
  const _hideModal = () => {
    form.resetFields();
    hideModal()
  }
  const renderCardInfo = (cardInfo) =>{
    let text = `${cardInfo?.cardName}-${MemberCardTypeMap[cardInfo.cardType]}`;
    if(['2','4'].includes(cardInfo.cardType)){
      text = `${text}-剩余次数：${cardInfo.balance}`
    }else if(cardInfo.cardType ==='1'){
      text = `${text}-余额：${cardInfo.balance}`
    }else if(cardInfo.cardType === '3'){
      text = `${text}-${cardInfo.expiryDate}`
    }
    return text;
}
  return <Modal
    title="添加预约"
    visible={visible}
    onCancel={_hideModal}
    footer={null}
  >
    <Form
      style={{
        marginTop: 8,
      }}
      form={form}
      name="basic"
      onFinish={_onFinish}
      initialValues={{
        bookingNum: 1
      }}
    >
      <FormItem
        {...formItemLayout}
        label="会员"
        name="member"
      >
        <Select
          showSearch
          placeholder="请输入会员姓名或者手机号码"
          showArrow={false}
          filterOption={false}
          onSearch={handleSearch}
          onSelect={handleSelect}
          notFoundContent={null}
        >
          {options}
        </Select>
      </FormItem>
      {!!member &&
        <>
          <FormItem
            {...formItemLayout}
            label="姓名"
            name="name"
          >
            <span>{member.name}</span>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="性别"
            name="sex"
          >
            <span>{member.sex == '1' ? '男' : member.sex == '2' ? '女' : '未设置'}</span>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="电话"
            name="phone"
          >
            <span>{member.phone}</span>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="预约人数"
            name="bookingNum"
          >
            <InputNumber
              min={0}
              style={{ width: '100%' }}
              formatter={value => `${value}人`}
              parser={value => value.replace('人', '')}
            />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="预约会员卡"
            name="cardId"
            rules={[
              {
                required: true,
                message: '请选择预约会员卡',
              },
            ]}
          >
            {
              membersCardList && membersCardList.length > 0 ?
                <Radio.Group>
                  {
                    membersCardList && membersCardList.map((item, index) => <Col span={24}><Radio value={item.cardId} key={index}>{renderCardInfo(item)}</Radio></Col>)
                  }
                </Radio.Group> : "当前没有可用会员卡"
            }
          </FormItem>
          {
            type == '3' && <>
              <FormItem
                {...formItemLayout}
                label="场馆"
                name="venueName"
              >
                <span>{venueName}</span>
              </FormItem>
              <FormItem
                {...formItemLayout}
                label="预约时间"
                name="startTime"
                rules={[
                  {
                    required: true,
                    message: '请选择预约时间',
                  },
                ]}
              >
                <Radio.Group onChange={(e)=>{
                  setStartTime(e.target.value)
                  dispatch({
                    type: 'cubeReservation/querySiteInfoLeftList',
                    payload: {
                      dataTime:e.target.value,
                      venueId,
                      classId
                    },
                  })
                }}>
                  {
                    timeList && timeList.map((item, index) => <Radio key={index} value={item}>{item}</Radio>)
                  }
                </Radio.Group>
              </FormItem>
             {
               startTime && <FormItem
               {...formItemLayout}
               label="场地"
               name="siteId"
               rules={[
                 {
                   required: true,
                   message: '请选择场地',
                 },
               ]}
             >
               <Select style={{ width: '100%' }} placeholder="请选择">
                 {
                   siteList && siteList.map((item, index) => <Select.Option value={item.id} key={index}>{item.name}</Select.Option>)
                 }
               </Select>
             </FormItem>
             }

            </>
          }
          <FormItem
            {...formItemLayout}
            label="备注"
            name="zb"
          >
            <TextArea rows={4} placeholder="请输入" />
          </FormItem>
          <FormItem
            {...submitFormLayout}
            style={{
              marginTop: 32,
            }}
          >
            <Button type="primary" htmlType="submit" loading={submitting}>
              确认预约
            </Button>
          </FormItem>
        </>
      }
    </Form>
  </Modal>
}
export default ResevationSave